<template>
  <div>
    <van-search
      v-model.trim="value"
      shape="round"
      @clear="clearHandler"
      @input="inputSearchHandler"
      placeholder="请输入搜索关键词"
    />
    <div class="search_wrap" v-if="resList.length == 0">
      <div class="hot_title">热门搜索</div>
      <div class="hot_name_wrap">
        <div
          class="hot_item"
          v-for="(obj, index) in hotList"
          :key="index"
          @click="searchHandler(obj.first)"
        >
          {{ obj.first }}
        </div>
      </div>
    </div>

    <div class="search_wrap" v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <SongItem v-for="obj in resList" :key='obj.id' :id='obj.id' :title='obj.name' :label='obj.artists[0].name'></SongItem>
      </van-list>
    </div>
  </div>
</template>

<script>
import { hotSearchApi, searchApi } from "@/api";
import SongItem from '@/components/SongItem';
export default {
  data() {
    return {
      value: "",
      hotList: [],
      resList: [],
      timer: null,
      page: 0,
      loading: false,
      finished: false,
    };
  },
  methods: {
    async onLoad() {
      this.page++;
      let res = await this.getSearchApi();
      console.log("res: ", res);
      // 如果finshed为true 则说明已经没有数据了
      // 防止没有songs数据，报错
      if (!res.data.result.songs || !res.data.result.hasMore)
        return (this.finished = true);
      // if() return this.finished = true
      this.resList.push(...res.data.result.songs);
      // 数组中对象去重
      let obj = {};
      this.resList = this.resList.reduce((cur, next) => {
        obj[next.id] ? "" : (obj[next.id] = true && cur.push(next));
        return cur;
      }, []);
      // 完成本次请求，重置loading状态，方便下次请求
      this.loading = false;
    },
    async getSearchApi() {
      let keywords = this.value;
      if (!keywords || keywords.trim().length == 0) return;
      return await searchApi({ keywords, limit: 20, offset: this.page * 20 });
    },
    async searchHandler(v) {
      this.value = v;
      let res = await this.getSearchApi();
      console.log("res: ", res);
      this.resList = res.data.result.songs;
    },
    inputSearchHandler() {
      clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        let res = await this.getSearchApi();
        if (!res) return;
        this.resList = res.data.result.songs;
      }, 300);
    },
    clearHandler() {
      this.value = "";
      this.resList = "";
    },
  },
  async created() {
    let res = await hotSearchApi();
    this.hotList = res.data.result.hots;
  },
  components:{
    SongItem
  }
};
</script>

<style>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>